<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

    <script type="text/javascript">
        // 市场活动页面加载
        $(function () {
            // 调用页面加载时查询功能
            querActivityListPage(1, 3);

            //当容器加载完成，对容器调用工具函数
            $(".mydate").datetimepicker({
                language: 'zh-CN',//语言
                format: 'yyyy-mm-dd',//日期格式
                minView: 'month',//日期选择器上最小能选择的日期的视图
                initialDate: new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
                autoclose: true,//选择日期之后，是否自动关闭日历
                todayBtn: true,//是否显示当前日期的按钮
                clearBtn: true,//是否显示清空按钮
            });

            // 回车登录
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    $("#queryActivityBtn").click();
                }
            });

            // 给查询添加单击事件
            $("#queryActivityBtn").on("click", function () {
                querActivityListPage(1, 3);
            });

            // 给创建添加单击事件
            $("#createActivityBtn").on("click", function () {
                // 清空表单数据缓存
                $("#activityForm")[0].reset();
                // 查询创建功能中所有者信息
                $.ajax({
                    url: "workbench/activity/createActivityPage.do",
                    type: "get",
                    success: function (data) {
                        // 创建拼接html字符串
                        var str = "<option value=\"\">-----请选择-----</option>";
                        // 循环返回结果
                        $.each(data, function (index, obj) {
                            // 拼接字符串
                            str += "<option value=\"" + obj.id + "\">" + obj.name + "</option>";
                        });
                        // 将拼接字符串放到页面中
                        $("#create-marketActivityOwner").html(str);
                        // 显示创建页面
                        $("#createActivityModal").modal("show");
                    }
                });

                // 给创建中保存添加单击事件
                $("#saveCreateActivityBtn").on("click", function () {
                    // 获取页面用户输入的值
                    var owner = $.trim($("#create-marketActivityOwner").val());
                    if (!owner) {
                        alert("请选择所有者");
                        return;
                    }
                    var name = $.trim($("#create-marketActivityName").val());
                    if (!name) {
                        alert("请输入名称");
                        return;
                    }
                    var startDate = $.trim($("#create-startDate").val());
                    var endDate = $.trim($("#create-endDate").val());
                    var cost = $.trim($("#create-cost").val());
                    var description = $.trim($("#create-description").val());
                    // 发送请求
                    $.ajax({
                        url: "workbench/activity/saveCreateActivityBtnPage.do",
                        type: "post",
                        data: {
                            owner: owner,
                            name: name,
                            startDate: startDate,
                            endDate: endDate,
                            cost: cost,
                            description: description
                        },
                        success: function (data) {
                            if (data.code === 1000) {
                                alert("创建成功！")
                                $("#checkedAll").prop("checked",false);
                                // 隐藏创建页面
                                $("#createActivityModal").modal("hide");
                                // 刷新列表数据
                                querActivityListPage(1, $("#demo_pag1").bs_pagination("getOption", "rowsPerPage"));
                            } else {
                                alert(data.message)
                            }
                        }
                    });
                });
            });

            // 给修改添加单击事件
            $("#editActivityBtn").on("click", function () {
                // 获取选中记录
                var checkeds = $("#tBody input:checked");
                // 判断选中数量
                if (checkeds.length != 1) {
                    alert("只能编辑一条记录")
                    return;
                }
                // 获取选中标识
                var checkedId = checkeds.val();
                // 发送请求
                $.ajax({
                    url: "workbench/activity/editActivityBtnPage.do",
                    type: "post",
                    data: "id="+checkedId,
                    success: function (data) {
                        if (data.code === 1000) {
                            // 赋值
                            $("#edit-id").val(data.body.id);
                            $("#edit-marketActivityOwner").val(data.body.owner);;

                            $("#edit-marketActivityName").val(data.body.name);
                            $("#edit-startDate").val(data.body.startDate);
                            $("#edit-endDate").val(data.body.endDate);
                            $("#edit-cost").val(data.body.cost);
                            $("#edit-description").val(data.body.description);
                            $("#editActivityModal").modal("show");
                        } else {
                            alert(data.message)
                        }
                    }
                });
            });

            // 给更新添加单击事件
            $("#saveEditActivityBtn").on("click",function () {
                var owenr = $("#edit-marketActivityOwner").val();
                var name = $("#edit-marketActivityName").val();
                if (!name){
                    alert("“名称”不能为空");
                    return;
                }
                var id = $.trim($("#edit-id").val());
                var startDate = $.trim($("#edit-startDate").val());
                var endDate = $.trim($("#edit-endDate").val());
                var cost = $.trim($("#edit-cost").val());
                var description = $.trim($("#edit-description").val());

                $.ajax({
                    url: "workbench/activity/saveEditActivityBtnPage.do",
                    type: "post",
                    data: {
                        id:id,
                        owner:owenr,
                        name:name,
                        startDate:startDate,
                        endDate:endDate,
                        cost:cost,
                        description:description
                    },
                    success:function (data) {
                        if (data.code === 1000){
                            alert("更新成功");
                            $("#editActivityModal").modal("hide");
                            // 刷新数据
                            querActivityListPage($("#demo_pag1").bs_pagination("getOption","currentPage"),$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
                        }else {
                            alert(data.message)
                        }
                    }
                })
            });

            // 给删除按钮添加单击事件
            $("#deleteActivityBtn").on("click",function () {
                // 获取选中的复选框
                var checkeds = $("#tBody input:checked");
                // 判断选中状态
                if (checkeds.length == 0){
                    alert("请选择需要删除的记录");
                    return;
                }
                if (confirm("您确定要删除吗？")){
                    var ids = "";
                    $.each(checkeds,function (index,obj) {
                        ids += "id="+$(obj).val()+"&";
                    });
                    ids = ids.substring(0,ids.length-1);
                    $.ajax({
                        url: "workbench/activity/deleteActivityBtnPage.do",
                        type: "post",
                        data: ids,
                        success:function (data) {
                            if (data.code === 1000){
                                alert("删除成功！");
                                $("#deleteActivityBtn").prop("checked",false);
                                querActivityListPage($("#demo_pag1").bs_pagination("getOption","currentPage"),$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
                            }else{
                                alert(data.message)
                            }
                        }
                    });
                }
            });

            // 给批量导出添加单击事件
            $("#exportActivityAllBtn").on("click",function () {
                window.location.href="workbench/activity/exportActivityList.do"
            });

            /*给选择导出添加单击事件*/
            $("#exportActivityXzBtn").on("click",function () {
                // 获得选中记录
                var checkeds = $("tBody input:checked");
                // 循环遍历
                var ids = "";
                $.each(checkeds,function (index,obj) {
                    ids += "id="+$(obj).val() +"&";
                })
                ids = ids.substring(0,ids.length-1)
                window.location.href="workbench/activity/exportActivityById?"+ids;
               /*$.ajax({
                   url:"workbench/activity/exportActivityXzById.do",
                   type:"post",
                   data: ids,
                   success:function (data) {
                   }
               });*/
            });

            // 给导入添加单击事件
            $("#importActivityListBtn").on("click",function () {
                $("#importActivityModal").modal("show");
            })

            // 导入按钮单击事件
            $("#importActivityBtn").on("click",function () {
                // 获取文件的名称
                var activityFilePathName = $("#activityFile").val().toString();
                // 获取后缀
                var suffix = activityFilePathName.substring(activityFilePathName.lastIndexOf(".")).toLowerCase();
                // 验证格式
                if(".xls" != suffix){
                    alert("操作仅针对Excel，仅支持后缀名为XLS的文件。")
                    return;
                }
                // 获取文件对象验证文件大小
                var fileElement = $("#activityFile")[0].files[0];
                // 判断文件大小
                if(fileElement.size > 5*1024*1024){
                    alert("请确认您的文件大小不超过5MB。")
                    return
                }
                // 创建表单
                var formData = new FormData();
                formData.append("activityFile",fileElement);
                // 发送请求
                $.ajax({
                    url:"workbench/activity/importActivityList.do",
                    type:"post",
                    contentType:false,// 关闭只能上传文本数据
                    processData:false,
                    data:formData,
                    success:function (data) {
                        if (data.code === 1000){
                            $("#checkedAll").prop("checked",false);
                            $("#importActivityModal").modal("hide");
                            alert("导入成功");
                            // 刷新数据
                            querActivityListPage($("#demo_pag1").bs_pagination("getOption","currentPage"),$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
                        }else {
                            alert(data.message)
                        }
                    }
                });
            });


        });

        // 加载市场活动列表数据
        function querActivityListPage(pageNo, pageSize) {
            var activityName = $.trim($("#query-name").val());
            var ownerName = $.trim($("#query-owner").val());
            var startDate = $.trim($("#query-startDate").val());
            var endDate = $.trim($("#query-endDate").val());
            $.ajax({
                url: "workbench/activity/querActivityListPage.do",
                type: "get",
                data: {
                    pageNo: pageNo,
                    pageSize: pageSize,
                    activityName: activityName,
                    ownerName: ownerName,
                    startDate: startDate,
                    endDate: endDate
                },
                success: function (data) {
                    console.log("PageInfo对象信息：" + JSON.stringify(data.body));
                    if (data.code === 1000) {
                        if ("" == data.body.list) { // 查询无数据
                            alert(data.message)
                        } else {
                            var str = "";
                            $.each(data.body.list, function (index, obj) {
                                str += "<tr class=\"active\">";
                                str += "<td><input type=\"checkbox\" value=\"" + obj.id + "\"></td>";
                                str += "<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/detail?id="+obj.id+"';\">" + obj.name + "</a></td>\n"
                                str += "<td>" + obj.owner + "</td>"
                                str += "<td>" + obj.startDate + "</td>"
                                str += "<td>" + obj.endDate + "</td>"
                                str += "</tr>"

                            });
                            $("#tBody").html(str);
                            // 分页插件
                            $("#demo_pag1").bs_pagination({
                                currentPage: pageNo,//当前页

                                rowsPerPage: pageSize,//每页显示条数
                                totalRows: data.body.total,//总条数
                                totalPages: data.body.pages,//总页数

                                visiblePageLinks: 2,//显示的翻页卡片数

                                showGoToPage: true,//是否显示"跳转到第几页"
                                showRowsPerPage: true,//是否显示"每页显示条数"
                                showRowsInfo: true,//是否显示"记录的信息"

                                //每次切换页号都会自动触发此函数，函数能够返回切换之后的页号和每页显示条数
                                onChangePage: function (e, pageObj) { // returns page_num and rows_per_page after a link has clicked
                                    /*alert(pageObj.currentPage);
                                    alert(pageObj.rowsPerPage);*/
                                    $("#checkedAll").prop("checked", false);
                                    // demo_pag1 获得分页插件   “getOption” 当前选择  “currentPage”当前页面
                                    querActivityListPage($("#demo_pag1").bs_pagination("getOption","currentPage"),$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
                                }
                            });
                        }
                    } else {
                        alert(data.message)
                    }
                }
            });
        }

    </script>
    <script type="text/javascript" src="common/js/common.js"></script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="activityForm">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: #ff0000;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner">
                                <option value="">------请选择------</option>
                                <c:forEach items="${userList}" var="u">
                                    <option value="${u.id}">${u.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startDate" class="col-sm-2 control-label ">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate " id="create-startDate" readonly="true">
                        </div>
                        <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="create-endDate" readonly="true">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveCreateActivityBtn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">
                                <c:forEach items="${userList}" var="u">
                                    <option value="${u.id}">${u.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-startDate" value="2020-10-10">
                        </div>
                        <label for="edit-endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-endDate" value="2020-10-20">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost" value="5,000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-description">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveEditActivityBtn" type="button" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls格式]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="query-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="query-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control mydate" type="text" id="query-startDate" readonly/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control mydate" type="text" id="query-endDate" readonly>
                    </div>
                </div>

                <button id="queryActivityBtn" type="button" class="btn btn-default">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="createActivityBtn" type="button" class="btn btn-primary"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button id="editActivityBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button id="deleteActivityBtn" type="button" class="btn btn-danger"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="importActivityListBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkedAll"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="tBody">

                </tbody>
            </table>
            <!--创建容器-->
            <div id="demo_pag1"></div>
        </div>
        <div style="height: 50px; position: relative;top: 30px;">
            <div>
                <button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录
                </button>
            </div>
            <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
                <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        10
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">20</a></li>
                        <li><a href="#">30</a></li>
                    </ul>
                </div>
                <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
            </div>

        </div>

    </div>

</div>
</body>
</html>
